<template>
    <div class="simulation-room-detail-container">
        <div class="s-r__room_statistics">
            <div class="s-r__room_statistics_title">
                房间信息
            </div>
            <div class="s-r__room_statistics_content">
                <div class="s-r__room_statistics_item">
                    <div class="s-r__room_statistics_item_num">对海打击房间</div>
                    <div class="s-r__room_statistics_item_name">房间名称</div>
                </div>
                <div class="s-r__room_statistics_item">
                    <div class="s-r__room_statistics_item_num">对海打击</div>
                    <div class="s-r__room_statistics_item_name">试验名称</div>
                </div>
                <div class="s-r__room_statistics_item">
                    <div class="s-r__room_statistics_item_num">Platfrom5.0</div>
                    <div class="s-r__room_statistics_item_name">引擎版本</div>
                </div>
                <div class="s-r__room_statistics_item">
                    <div class="s-r__room_statistics_item_num">否</div>
                    <div class="s-r__room_statistics_item_name">房间结束后删除</div>
                </div>
                <div class="s-r__room_statistics_item">
                    <div class="s-r__room_statistics_item_num">10</div>
                    <div class="s-r__room_statistics_item_name">并行任务数量</div>
                </div>
                <div class="s-r__room_statistics_item">
                    <div class="s-r__room_statistics_item_num">10</div>
                    <div class="s-r__room_statistics_item_name">默认倍速</div>
                </div>
                <div class="s-r__room_statistics_item">
                    <div class="s-r__room_statistics_item_num">10</div>
                    <div class="s-r__room_statistics_item_name">当前轮次</div>
                </div>
                <div class="s-r__room_statistics_item">
                    <div class="s-r__room_statistics_item_num">100</div>
                    <div class="s-r__room_statistics_item_name">总伦次</div>
                </div>
                <div class="s-r__room_statistics_item">
                    <div class="s-r__room_statistics_item_num">2023/1/1 10:22:22</div>
                    <div class="s-r__room_statistics_item_name">创建时间</div>
                </div>
                <div class="s-r__room_statistics_item">
                    <div class="s-r__room_statistics_item_word">
                        这是一个描述
                    </div>
                    <div class="s-r__room_statistics_item_name">房间描述</div>
                </div>
            </div>
        </div>
        <div class="s-r__task">
            <div class="s-r__task_title">
                任务信息
            </div>
            <div class="s-r__task_control">
                <div class="s-r__task_control_left">
                    <el-checkbox style="display: flex; align-items: center;" v-model="checkAll"
                        @change="handleCheckAllChange">全选</el-checkbox>
                </div>
                <div class="s-r__task_control_right">
                    <el-button class="jtyj-btn-cancel" size="mini">批量关闭</el-button>
                    <el-button class="jtyj-btn-primary" size="mini">批量开启</el-button>
                </div>
            </div>

            <template v-for="(item, index) in taskList">
                <div class="s-r__task_item">
                    <div class="s-r__task_item_left">
                        <div class="check_box">
                            <el-checkbox style="display: flex; align-items: center;" :value="checkedStatus(item.taskId)"
                                @change="(val) => handleCheckChange(val, item)"></el-checkbox>
                        </div>
                        <div class="content">
                            <div class="content_item">
                                <div class="content_item_num">{{ item.taskName }}</div>
                                <div class="content_item_name">任务名称</div>
                            </div>
                            <div class="content_item">
                                <div class="content_item_num">{{ item.currentRound }}</div>
                                <div class="content_item_name">当前轮次</div>
                            </div>
                            <div class="content_item">
                                <el-tooltip :content="item.cdk" placement="top">
                                    <div class="content_item_num" style="cursor: pointer;" @click="clickCopy">
                                        {{ item.cdk }}
                                    </div>
                                </el-tooltip>
                                <div class="content_item_name">CDK</div>
                            </div>
                            <div class="content_item">
                                <div class="content_item_num">{{ item.domain }}</div>
                                <div class="content_item_name">域</div>
                            </div>
                            <div class="content_item">
                                <el-tooltip :content="item.subDomain" placement="top">
                                    <div class="content_item_num" style="cursor: pointer;" @click="clickCopy">
                                        {{ item.subDomain }}
                                    </div>
                                </el-tooltip>
                                <div class="content_item_name">子域</div>
                            </div>
                            <div class="content_item">
                                <div class="content_item_num">
                                    <el-tag>{{ item.runStatus == 1 ? '运行中' : '未运行' }}</el-tag>
                                </div>
                                <div class="content_item_name">运行状态</div>
                            </div>
                        </div>
                    </div>
                    <div class="s-r__task_item_middle">
                        <div class="rectangle" style="background-color: #FF3E4D;" @click="goSimulationRunPage"></div>
                        <div class="rectangle" style="background-color: #2D87F0;" @click="goSimulationRunPage"></div>
                        <div class="rectangle" style="background-color: #F8F9FA;" @click="goSimulationRunPage"></div>
                    </div>
                    <div class="s-r__task_item_right">
                        <div class="content">
                            <div class="content_item">
                                <div class="content_item_num">{{ item.monitor.cpuUsage }}</div>
                                <div class="content_item_name">CPU 用量（m）</div>
                            </div>
                            <div class="content_item">
                                <div class="content_item_num">{{ item.monitor.memoryUsage }}</div>
                                <div class="content_item_name">内存用量（Gi）</div>
                            </div>
                            <div class="content_item">
                                <div class="content_item_num">{{ item.monitor.outboundTraffic }}</div>
                                <div class="content_item_name">出站流量（Kbps）</div>
                            </div>
                            <div class="content_item">
                                <div class="content_item_num">{{ item.monitor.inboundTraffic }}</div>
                                <div class="content_item_name">入站流量（Kbps）</div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>



        </div>

    </div>
</template>

<script>
import clipboard from 'clipboard'
export default {
    data() {
        return {
            checkAll: false,
            multipleSelection: [],
            taskList: [
                {
                    taskId: 1,
                    taskName: "对海打击_1",
                    currentRound: 1,
                    runStatus: 1,
                    cdk: "http://192.168.1.16:30517/experiment/project/result/get?platformId=652&experimentId=40&imageName=platform",
                    domain: 90,
                    subDomain: "ba0b1e1c4e1241809cd6e1ada629d7be",
                    monitor: {
                        cpuUsage: "4m",
                        memoryUsage: "1.48Gi",
                        outboundTraffic: "0.96Kbps",
                        inboundTraffic: "5.71Kbps"
                    }
                },
                {
                    taskId: 2,
                    taskName: "对海打击_2",
                    currentRound: 1,
                    runStatus: 1,
                    cdk: "http://192.168.1.16:30517/experiment/project/result/get?platformId=652&experimentId=40&imageName=platform",
                    domain: 90,
                    subDomain: "ba0b1e1c4e1241809cd6e1ada629d7be",
                    monitor: {
                        cpuUsage: "4m",
                        memoryUsage: "1.48Gi",
                        outboundTraffic: "0.96Kbps",
                        inboundTraffic: "5.71Kbps"
                    }
                }, {
                    taskId: 3,
                    taskName: "对海打击_2",
                    currentRound: 1,
                    runStatus: 1,
                    cdk: "http://192.168.1.16:30517/experiment/project/result/get?platformId=652&experimentId=40&imageName=platform",
                    domain: 90,
                    subDomain: "ba0b1e1c4e1241809cd6e1ada629d7be",
                    monitor: {
                        cpuUsage: "4m",
                        memoryUsage: "1.48Gi",
                        outboundTraffic: "0.96Kbps",
                        inboundTraffic: "5.71Kbps"
                    }
                }, {
                    taskId: 4,
                    taskName: "对海打击_2",
                    currentRound: 1,
                    runStatus: 1,
                    cdk: "http://192.168.1.16:30517/experiment/project/result/get?platformId=652&experimentId=40&imageName=platform",
                    domain: 90,
                    subDomain: "ba0b1e1c4e1241809cd6e1ada629d7be",
                    monitor: {
                        cpuUsage: "4m",
                        memoryUsage: "1.48Gi",
                        outboundTraffic: "0.96Kbps",
                        inboundTraffic: "5.71Kbps"
                    }
                }, {
                    taskId: 5,
                    taskName: "对海打击_2",
                    currentRound: 1,
                    runStatus: 1,
                    cdk: "http://192.168.1.16:30517/experiment/project/result/get?platformId=652&experimentId=40&imageName=platform",
                    domain: 90,
                    subDomain: "ba0b1e1c4e1241809cd6e1ada629d7be",
                    monitor: {
                        cpuUsage: "4m",
                        memoryUsage: "1.48Gi",
                        outboundTraffic: "0.96Kbps",
                        inboundTraffic: "5.71Kbps"
                    }
                }, {
                    taskId: 6,
                    taskName: "对海打击_2",
                    currentRound: 1,
                    runStatus: 1,
                    cdk: "http://192.168.1.16:30517/experiment/project/result/get?platformId=652&experimentId=40&imageName=platform",
                    domain: 90,
                    subDomain: "ba0b1e1c4e1241809cd6e1ada629d7be",
                    monitor: {
                        cpuUsage: "4m",
                        memoryUsage: "1.48Gi",
                        outboundTraffic: "0.96Kbps",
                        inboundTraffic: "5.71Kbps"
                    }
                }, {
                    taskId: 7,
                    taskName: "对海打击_2",
                    currentRound: 1,
                    runStatus: 1,
                    cdk: "http://192.168.1.16:30517/experiment/project/result/get?platformId=652&experimentId=40&imageName=platform",
                    domain: 90,
                    subDomain: "ba0b1e1c4e1241809cd6e1ada629d7be",
                    monitor: {
                        cpuUsage: "4m",
                        memoryUsage: "1.48Gi",
                        outboundTraffic: "0.96Kbps",
                        inboundTraffic: "5.71Kbps"
                    }
                }, {
                    taskId: 8,
                    taskName: "对海打击_2",
                    currentRound: 1,
                    runStatus: 1,
                    cdk: "http://192.168.1.16:30517/experiment/project/result/get?platformId=652&experimentId=40&imageName=platform",
                    domain: 90,
                    subDomain: "ba0b1e1c4e1241809cd6e1ada629d7be",
                    monitor: {
                        cpuUsage: "4m",
                        memoryUsage: "1.48Gi",
                        outboundTraffic: "0.96Kbps",
                        inboundTraffic: "5.71Kbps"
                    }
                }, {
                    taskId: 9,
                    taskName: "对海打击_2",
                    currentRound: 1,
                    runStatus: 1,
                    cdk: "http://192.168.1.16:30517/experiment/project/result/get?platformId=652&experimentId=40&imageName=platform",
                    domain: 90,
                    subDomain: "ba0b1e1c4e1241809cd6e1ada629d7be",
                    monitor: {
                        cpuUsage: "4m",
                        memoryUsage: "1.48Gi",
                        outboundTraffic: "0.96Kbps",
                        inboundTraffic: "5.71Kbps"
                    }
                }, {
                    taskId: 10,
                    taskName: "对海打击_2",
                    currentRound: 1,
                    runStatus: 1,
                    cdk: "http://192.168.1.16:30517/experiment/project/result/get?platformId=652&experimentId=40&imageName=platform",
                    domain: 90,
                    subDomain: "ba0b1e1c4e1241809cd6e1ada629d7be",
                    monitor: {
                        cpuUsage: "4m",
                        memoryUsage: "1.48Gi",
                        outboundTraffic: "0.96Kbps",
                        inboundTraffic: "5.71Kbps"
                    }
                },
            ]

        }
    },
    components: {
        clipboard
    },
    computed: {
        checkedStatus() {
            return (taskId) => {
                return this.multipleSelection.includes(taskId)
            };
        }
    },
    methods: {
        // 处理全选更改
        handleCheckAllChange(updatedValue) {
            this.multipleSelection = updatedValue
                ? [...this.taskList.map(item => item.taskId)]
                : [];
        },
        // 处理选择框更改
        handleCheckChange(updatedValue, row) {
            const index = this.multipleSelection.indexOf(row.taskId);
            if (updatedValue && index === -1) {
                this.multipleSelection.push(row.taskId);
            } else if (!updatedValue && index > -1) {
                this.multipleSelection.splice(index, 1);
            }
            // 更新全选状态
            this.checkAll = this.multipleSelection.length === this.taskList.length;
        },
        // 点击复制
        clickCopy() {
            let _this = this;
            //创建出来的的剪贴板对象,通过id来创建剪贴对象，也可以通过class来获取剪贴对象
            let clipboardBean = new clipboard(".content_item_num", {
                text: function (trigger) {
                    return trigger.textContent;
                }
            });
            clipboardBean.on('success', function (e) {
                _this.$message.success(
                    _this.$toolHandle.getI18nName(
                        _this.$zh.setup.copyText,
                        _this.$en.setup.copyText,
                        _this.$i18n.locale,
                        "success"
                    )
                );
                //复制完成后销毁clipboard对象，预防下一次调用会多次提示
                clipboardBean.destroy()
            });

            clipboardBean.on('error', function (e) {
                _this.$message.error(
                    _this.$toolHandle.getI18nName(
                        _this.$zh.setup.copyText,
                        _this.$en.setup.copyText,
                        _this.$i18n.locale,
                        "error"
                    )
                );
                //复制完成后销毁clipboard对象，预防下一次调用会多次提示
                clipboardBean.destroy()
            });
        },

        // 前往仿真运行页面
        goSimulationRunPage(){
            this.$router.push({
                name: 'simulationRun',
                query: {
                    roomId: 1,
                    taskId: 1,
                    baseTopic: "xrhdaine"
                }
            })
        }

    },
    mounted() {

    }
}
</script>

<style lang="scss" scoped>
.simulation-room-detail-container {
    width: 100%;
    padding: 1%;

    .s-r__room_statistics {
        border-radius: 5px;
        padding: 10px 20px;
        background-color: var(--ui-component-background-alt);
        margin-bottom: 30px;

        .s-r__room_statistics_title {
            font-size: var(--ui-font-size-base);
        }

        .s-r__room_statistics_content {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            flex-wrap: wrap;

            .s-r__room_statistics_item {
                .s-r__room_statistics_item_num {
                    font-size: var(--ui-font-size-xl);
                }

                .s-r__room_statistics_item_word {
                    font-size: var(--ui-font-size-base);
                    color: var(--app-text-fg-low);
                }

                .s-r__room_statistics_item_name {
                    font-size: var(--ui-font-size-sm);
                    color: var(--app-text-fg-low);
                    margin-top: 10px;
                    margin-bottom: 20px;

                }
            }

            & :last-child {
                width: 100%;
            }


        }

    }

    .s-r__task {
        border-radius: 5px;
        padding: 10px 20px;
        background-color: var(--ui-component-background-alt);

        .s-r__task_title {
            font-size: var(--ui-font-size-base);
        }

        .s-r__task_control {
            position: sticky;
            top: 0;
            z-index: 100;
            padding-bottom: 10px;
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            background-color: var(--ui-component-background-alt);

            .s-r__task_control_right {
                display: flex;
            }
        }

        .s-r__task_item {
            height: 100px;
            margin-bottom: 10px;
            display: flex;

            .s-r__task_item_left {
                width: 70%;
                background-color: var(--ui-component-background);
                border-radius: 5px 0 0 5px;
                display: flex;
                align-items: center;


                .check_box {
                    display: flex;
                    align-items: center;
                    margin-right: 20px;
                }

                .content {
                    display: flex;
                    overflow: auto;


                    .content_item {
                        width: 120px;
                        min-width: 120px;
                        margin-right: 40px;

                        .content_item_num {
                            font-size: var(--ui-font-size-base);
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

                        .content_item_word {
                            font-size: var(--ui-font-size-base);
                            color: var(--app-text-fg-low);
                        }

                        .content_item_name {
                            font-size: var(--ui-font-size-sm);
                            color: var(--app-text-fg-low);
                            margin-top: 10px;
                        }

                    }

                    & :last-child {
                        margin-right: 0;
                    }

                }
            }

            .s-r__task_item_middle {
                width: 100px;
                background-color: var(--ui-border-color-base);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-around;
                padding-top: 10px;
                padding-bottom: 10px;

                .rectangle {
                    width: 30px;
                    height: 17px;
                    border-radius: 2px;
                    cursor: pointer;

                    &:hover {
                        box-shadow: 0 0 8px rgba(255, 235, 59, 0.5);
                        /* 可选发光效果 */
                    }
                }

            }

            .s-r__task_item_right {
                width: calc(30% - 100px);
                background-color: var(--ui-segmented-bg);
                border-radius: 0 5px 5px 0;

                .content {
                    display: flex;
                    flex-wrap: wrap;
                    overflow: auto;
                    justify-content: space-between;
                    height: 100%;

                    .content_item {
                        width: 150px;
                        min-width: 150px;
                        margin-right: 5px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        margin-top: 2.5px;
                        margin-bottom: 2.5px;

                        .content_item_num {
                            font-size: var(--ui-font-size-base);
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

                        .content_item_word {
                            font-size: var(--ui-font-size-base);
                            color: var(--app-text-fg-low);
                        }

                        .content_item_name {
                            font-size: var(--ui-font-size-sm);
                            color: var(--app-text-fg-low);
                        }
                    }

                }
            }

        }
    }
}
</style>